<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>PAYING</title>
    <link rel="stylesheet" type="text/css" href="css/common.css">
    <link rel="stylesheet" type="text/css" href="css/register.css">
    <!--导入jquery-->
    <script src="js/jquery-3.3.1.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/getParameter.js"></script>
    <script src="vue/vue.min.js"></script>
    <link rel="stylesheet" href="vue/iview.css">
    <script src="vue/iview.min.js"></script>
</head>
<body>
<!--引入头部-->
<div id="header"></div>
<!-- 头部 end -->

<div class="rg_layout" id="payDemo">
    <div class="rg_form clearfix">
        <div class="rg_form_left">
            <p>PAYMENT</p>
        </div>
        <div style="margin-top: 100px;margin-left: 200px">
            <i-form ref="submitForm" label-width="180" label-colon>
                <form-item label="Service name" prop="title">
                    <label>{{ title }}</label>
                </form-item>

                <form-item label="Teacher">
                    <label>{{ teacher }}</label>
                </form-item>

                <form-item label="Service Category">
                    <label>{{ type }}</label>
                </form-item>

                <form-item label="Service Price / Hour">
                    <input id="price" type="text" v-model="price" readonly/>
                </form-item>

                <form-item label="Service Place" prop="place">
                    <label>{{ place }}</label>
                </form-item>

                <form-item label="Service Description" prop="description">
                    <label>{{ description }}</label>
                </form-item>

                <form-item label="Number of hours" prop="description">
                    <input type="number" id="hours"  v-model="hours" onchange="computeTotal()" />
                </form-item>

                <form-item label="Total prices" prop="description">
                    <input id="total" type="text"   v-model="total" readonly/>
                </form-item>

                <i-button style="margin-left: 200px;" type="success" @click="buy()">buy</i-button>
            </i-form>
        </div>
    </div>
</div>

<!--引入尾部-->
<div id="footer"></div>
<!--导入布局js，共享header和footer-->
<script type="text/javascript" src="js/include.js"></script>
</body>

<script type="text/javascript">
    function computeTotal(){
        let hours = document.getElementById("hours").value;
        document.getElementById("total").value = hours * document.getElementById("price").value;
    }
    new Vue({
        el: '#payDemo',
        data() {
            return {

                title: 'test',
                teacher: '',
                type: '',
                price: 0,
                place: '',
                description: '',
                cid: '',
                b_uname: '',
                hours:'0',
                total:'0'
            }
        },

        created() {
            let uid = getParameter("username");
            this.b_uname = uid;
            let id = getParameter("id");
            let url = 'course/getDetail';
            $.post(url, {id: id}, (resp) => {
                this.title = resp.course.title;
                this.teacher = resp.course.uid;
                this.type = resp.course.type;
                this.price = resp.course.price;
                this.place = resp.course.place;
                this.description = resp.course.description;
                this.cid = resp.course.id;
            }, 'json');
        },

        methods: {
            addOne() {
                this.$refs["submitForm"].validate((valid) => {
                    if (valid) {
                        if (this.formData.title.indexOf(this.formData.type) != -1) {
                            let url = 'course/offerCourse';
                            $.post(url, this.formData, (resp) => {
                                this.$Message.success('save successful!');
                            }, 'json');
                        } else {
                            this.$Message.error('name should include category！');
                        }

                    }
                })
            },

            buy() {
                let url = 'pay/addPayment';
                this.total = this.hours * this.price;
                if (this.total === 0){
                    alert("You can't have zero hours");
                    return;
                }
                $.post(url, {b_uname: this.b_uname, s_uname: this.teacher, cid: this.cid, total:this.total,hours:this.hours}, (resp) => {
                    this.$Message.success('You have successfully bought a course！');
                }, 'json');
            }
        },

        mounted() {

        }
    });
</script>
</html>
